<template>
  <div class="w-100%">
    <el-form :inline="true" @submit.prevent :model="formInline" class="demo-form-inline">
      <el-row :gutter="10">
        <el-col :span="6"
          ><el-form-item class="w-100%" label="菜单名称">
            <el-input
              class="w-100%"
              v-model="formInline.name"
              placeholder="菜单名称"
              clearable
            /> </el-form-item
        ></el-col>
        <el-col :span="6">
          <el-button type="primary" @click="test">测试按钮</el-button>
          <el-button type="primary" @click="search">查询</el-button>
          <el-button @click="add">新增</el-button>
        </el-col>
      </el-row>
    </el-form>
  </div>
  <!-- 菜单添加 -->
  <Dialog
    @close="close"
    :visible="visible"
    width="80%"
    height="400px"
    title="菜单管理"
    @submit="submitMenuItem"
  >
    <addMenuItem ref="addFormMenuItemEl"></addMenuItem>
  </Dialog>
</template>
<script lang="ts" setup>
import { reactive, ref } from 'vue'
import addMenuItem from './addMenuItem.vue'
import { ElMessage } from 'element-plus'
import { addMainMenuItem } from '@/api'
import { mqttIndex } from '@/api/mqtt'

const formInline = reactive({
  name: ''
})
const addFormMenuItemEl = ref<InstanceType<typeof addMenuItem> | null>(null)
const emit = defineEmits(['search'])
const visible = ref(false)
const test = () => {
  mqttIndex({
    id:"21faf7b608694951b77155787f161ac4",
    status:false,
  }).then((res) => {
    console.log(res)
  })
  console.log('ces')
}
const add = () => {
  visible.value = true
}
const close = () => {
  visible.value = false
}
const submitMenuItem = () => {
  if (addFormMenuItemEl.value) {
    addFormMenuItemEl.value.ruleFormRef?.validate((valid) => {
      if (valid) {
        const data: any = addFormMenuItemEl.value?.ruleForm
        addMainMenuItem(data).then((res: any) => {
          if (res?.code == 200) {
            visible.value = false
            ElMessage({
              message: res.message,
              type: 'success'
            })
            search()
            // getMenuList()
          } else {
            ElMessage({
              message: res.message,
              type: 'error'
            })
          }
        })
      }
    })
  }
}
const search = () => {
  emit('search', formInline)
}
</script>
<style lang="less" scoped>
/deep/.el-form--inline {
  .el-form-item {
    margin-right: 0px;
    margin-bottom: 0px;
  }
}
</style>
